<template>
  <transition name="slide">
    <div v-if="messageIsShow" class="container" :class="{'center':center,'bgcolor':bgcolor}">
      <i :class="['iconfont', `icon-${type}`]"></i>
      <span v-html="msg" v-if="isHtml"></span>
      <span v-text="msg" v-else></span>
      <span @click="closeMySelf" v-if="closeIconIsShow" class="xxx">×</span>
    </div>
  </transition>
</template>

<script>
import './style/font_1197978_zot2p7culo/iconfont.css';

export default {
  name: 'message1',
  data() {
    return {
      messageIsShow: true,
      type: '',
      msg: '',
      delay: 0,
      timer: null,
      closeIconIsShow: false,
      isHtml: false,
    };
  },
  methods: {
    closeMySelf() {
      this.messageIsShow = false;
    },
  },
  created() {
    this.closeIconIsShow = !this.delay;
  },
  mounted() {
    if (this.delay) {
      this.timer = setTimeout(() => {
        this.messageIsShow = false;
      }, this.delay);
    }
  },
  beforeDestroy() {
    clearTimeout(this.timer);
  },
};
</script>

<style scoped>
  .bgcolor{
    background-color:#fff9e6;
  }
  .center{
    text-align: center;
    text-indent: 1px;
  }
.icon-info{
  color: #abdcff;
}
  .icon-success{
  color: #8ce6b0;
}
  .icon-warning{
  color: #ffd77a;
}
  .icon-error{
  color: #ffb08f;
}
  .xxx{
    position: absolute;
    right: 10px;
    top: 0;
  }
.container{
  box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
  cursor:pointer;
  width: 500px;
  line-height: 80px;
  border-radius: 12px;
  border: 1px solid black;
  text-indent: 1rem;
  margin: auto;
  position: absolute;
  right: 0;
  left: 0;
  top: 10px;
}
  .slide-enter,.slide-leave-to{
    transform: translate3d(0,-60px,0);
    opacity: 0;
  }
  .slide-enter-active,.slide-leave-active {
    transition: all .3s ease-in-out;
  }
  .slide-enter-to,.slide-leave {
    transform: translate3d(0,-60px,0);
    opacity: 1;}
</style>
